
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage } from "element-plus";
// import { agvs, agvsDetails } from "../apis/http";
import LoginForm from "./components/loginform.vue";
import SetPassword from "./components/setPassword.vue";
import { useI18n } from "vue-i18n";
import i18n from "@/lang/index";
const { t } = useI18n();
let langState = ref<any>("");
let isPassword = ref<boolean>(false);
let langData = ref([
  {
    value: "zh",
    label: "中文",
  },
  {
    value: "en",
    label: "English",
  },
]);
const language:any=ref('')
const getSomething = (val:boolean)=>{
  isPassword.value=val
}
const router=useRouter()
onMounted: {
  //进入页面之前判断是否选择过，如果选择过就执行，否则默认选择
  if(sessionStorage.getItem('lang')){
    language.value = sessionStorage.getItem('lang');
  if (sessionStorage.getItem("lang") == "zh") {
    language.value = "zh";
    } else if (sessionStorage.getItem("lang") == "en") {
      language.value= "en";
    }
  }else{
    language.value= "zh";
  }
  langState.value =  language.value;
  i18n.global.locale.value =  language.value;
  sessionStorage.setItem("lang",  language.value);
}
function clickPassword() {
  console.log(11111111);
  isPassword.value = !isPassword.value;
}

function handleChange(e: string): void {
  console.log(e);
  langState.value = e;
  i18n.global.locale.value = e as Itype;
  sessionStorage.setItem("lang", i18n.global.locale.value);
}
function registrationClick(){
  console.log(111111111111)
  router.push({
    path:'/registration',
  })
}
</script>

<template>
  <div class="container-bg">
    <div class="login-container flx-center" ref="flexContainer">
      <div class="login-box">
        <div class="tips">
          <!-- <span
            v-for="(item, index) in langData"
            :key="index"
            @click="handleChange(item.value)"
            :style="
              langState == item.value ? 'color:rgba(30, 94, 255, 100)' : ''
            "
            >{{ item.label }}</span
          > -->
        </div>
        <div class="login-logo">
          <img src="../../assets/images/client/login-logo.png" alt="" />
        </div>

        <div class="login-section">
          <div
            class="login-left"
            :style="isPassword ? 'margin-top: -150px' : ''"
          >
            <img src="@/assets/images/client/login-left.png" alt="login" />
          </div>
          <div class="login-form">
            <LoginForm v-if="isPassword == false" />
            <SetPassword v-else  @getSomething="getSomething" />
            <div class="login-btn" v-if="isPassword == false">
              <p @click="clickPassword">忘记密码</p>
              <p @click="registrationClick">注册</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
